<template>
    <BasicLayout>
        <template #wrapper>
            <el-card class="box-card">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                    <el-form-item label="公司名称" prop="companyName">
                        <el-input v-model="form.companyName" placeholder="公司名称" />
                    </el-form-item>

                    <el-form-item label="图片路径" prop="imgUrl">
                        <uploadImg :img-url.sync="form.imgUrl" :cut="false" />
                    </el-form-item>
                    <el-form-item label="简介" prop="description" v-if="TinymceIsAble">
                        <tinymce v-model="form.description" :height="300" ref="tinymce" />
                    </el-form-item>
                    <el-form-item label="官方微信" prop="wechat">
                        <el-input v-model="form.wechat" placeholder="官方微信" />
                    </el-form-item>
                    <el-form-item label="客服热线" prop="phone">
                        <el-input v-model="form.phone" placeholder="客服热线" />
                    </el-form-item>
                    <el-form-item label="宣传标语" prop="title">
                        <el-input v-model="form.title" placeholder="宣传标语" />
                    </el-form-item>
                    <el-form-item label="权重" prop="weigh">
                        <el-input v-model="form.weigh" placeholder="权重" />
                    </el-form-item>
                </el-form>
                <div class="row ju_cen">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-card>
        </template>
    </BasicLayout>
</template>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    height: 80vh;
    overflow-y: scroll;
    //over-flow-y:scroll
}
.dialogForm {
    display: block;
    .el-dialog {
        margin-top: 15vh !important;
    }
}
.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.1;
    background: #eee;
}

.list-group {
    min-height: 20px;
    border-left: 2px solid #f1f1f1 !important;
}
.line {
    height: 2px;
    background: #fafafa;
    -webkit-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
    -moz-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
    -ms-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
    user-select: none;
}

.list-group-item {
    cursor: move;
    padding: 0 24px;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: #fafafa !important;
    border-radius: 6px;
}
.list-group-item i {
    cursor: pointer;
}
.wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}
.item {
    width: 300px;
    height: 50px;
    background-color: #42b983;
    color: #ffffff;
}
.content {
    padding: 0 20px;
    .courseBox {
        padding: 20px;
        border-radius: 6px;
        border: 1px solid #ddd;
    }
}
.taskBox {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 95%;
    box-sizing: border-box;
}
.freeTask {
    color: #fff;
    background-color: #f46300;
}
.taskItem .el-checkbox__label {
    width: 100%;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
    margin-left: 10px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
    margin-left: 10px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<script>


import { addYmCompany, delYmCompany, getYmCompany, listYmCompany, updateYmCompany } from '@/api/edu/platform/company'
import Tinymce from "@/components/Tinymce";
export default {
    name: 'Config',
    components: {
        Tinymce,
    },
    data () {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            isEdit: false,
            // 类型数据字典
            typeOptions: [],
            ymcompanyList: [],
            TinymceIsAble: true,
            // 查询参数
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                companyName:
                    undefined,
                description:
                    undefined,
                wechat:
                    undefined,
                phone:
                    undefined,

            },
            // 表单参数
            form: {
                description: ""
            }
            ,
            // 表单校验
            rules: {
                companyName:
                    [
                        { required: true, message: '公司名称不能为空', trigger: 'blur' }
                    ],
                description:
                    [
                        { required: true, message: '简介不能为空', trigger: 'blur' }
                    ],
                wechat:
                    [
                        { required: true, message: '官方微信不能为空', trigger: 'blur' }
                    ],
                phone:
                    [
                        { required: true, message: '客服热线不能为空', trigger: 'blur' }
                    ],
            }
        }
    },
    created () {
        this.getList()
    },
    methods: {
        /** 查询参数列表 */
        getList () {
            this.loading = true
            listYmCompany(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.ymcompanyList = response.data.list
                this.total = response.data.count
                this.loading = false;
                let companyId = this.ymcompanyList[0].companyId
                getYmCompany(companyId).then(response => {
                    this.form = response.data
                    // this.open = true
                    // this.title = '修改公司详情表'
                    // this.isEdit = true
                })
            }
            )
        },
        // 取消按钮
        cancel () {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset () {
            this.form = {

                companyId: undefined,
                companyName: undefined,
                description: undefined,
                wechat: undefined,
                phone: undefined,
                imgUrl: undefined,
                title: undefined,
                weigh: undefined,
            }
            this.resetForm('form')
        },


        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageIndex = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd () {
            this.reset()
            this.open = true
            this.title = '添加公司详情表'
            this.isEdit = false
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            this.ids = selection.map(item => item.companyId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 修改按钮操作 */
        handleUpdate (row) {
            this.reset()
            const companyId =
                row.companyId || this.ids
            getYmCompany(companyId).then(response => {
                this.form = response.data
                this.open = true
                this.title = '修改公司详情表'
                this.isEdit = true
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.companyId !== undefined) {
                        updateYmCompany(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功')
                                this.open = false
                                this.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                        })
                    } else {
                        addYmCompany(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('新增成功')
                                this.open = false
                                this.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete (row) {
            const Ids = row.companyId || this.ids
            this.$confirm('是否确认删除编号为"' + Ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delYmCompany(Ids)
            }).then(() => {
                this.getList()
                this.msgSuccess('删除成功')
            }).catch(function () {
            })
        }
    }
}
</script>
